// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Sprite)
    sprite: cc.Sprite = null;

    @property(cc.Sprite)
    colorSp1: cc.Sprite = null;

    @property(cc.Sprite)
    colorSp2: cc.Sprite = null;

    curMaterial: cc.MaterialVariant = null;

    R1: number = 0;
    G1: number = 0;
    B1: number = 0;

    R2: number = 0;
    G2: number = 0;
    B2: number = 0;

    
    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start() {
        this.curMaterial = this.sprite.getMaterial(0)
        // let prop = curMaterial.getProperty("myColor", 0);

        // console.log(prop);
        // curMaterial.setProperty("myColor", [1, 0, 0, 1], 0, true)

        this.changeColor1();
        this.changeColor2();
    }

    changeR1(slider:cc.Slider) {
        this.R1 = slider.progress;
        this.changeColor1();
    }
 
    changeG1(slider:cc.Slider) {
        this.G1 = slider.progress;
        this.changeColor1();
    }

    changeB1(slider: cc.Slider) {
        this.B1 = slider.progress;
        this.changeColor1();
    }

    changeColor1() {
        console.log(this.R1, this.G1, this.B1)
        // this.curMaterial.setProperty("showColor", [this.R1, this.G1, this.B1, 1], 0, true)

        this.colorSp1.node.color = new cc.Color(this.R1*255, this.G1*255, this.B1*255, 255);
    }


    //----------------------分割线-------------------------------
    changeR2(slider:cc.Slider) {
        this.R2 = slider.progress;
        this.changeColor2();
    }
 
    changeG2(slider:cc.Slider) {
        this.G2 = slider.progress;
        this.changeColor2();
    }

    changeB2(slider: cc.Slider) {
        this.B2 = slider.progress;
        this.changeColor2();
    }

    changeColor2() {
        console.log(this.R2, this.G2, this.B2)
        this.curMaterial.setProperty("tarColor", [this.R2, this.G2, this.B2, 1], 0, true)

        this.colorSp2.node.color = new cc.Color(this.R2*255, this.G2*255, this.B2*255, 255);
    }

    // update (dt) {}
}
